<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- <meta name="viewport" id="viewport" content="width=640, initial-scale=0.5, maximum-scale=0.5, user-scalable=no"> -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>闽游十三水</title>
  <script src="https://cdn.staticfile.org/fetch/2.0.3/fetch.min.js"></script>
  <link rel="shortcut icon" href="static/logo.32x32.png">
</head>

<body>
  <div id="app">
  </div>
  <xmp id="room-log-tpl">
    <table class="table-fill">
      <thead>
        <tr>
          <th>日期</th>
          <th style="font-size: 14px">{{formatDate(create_time)}}</th>
          <th>房号:{{id}}</th>
          <th colspan="{{player_number-1}}">类型:{{mode}}</th>
        </tr>
        <tr>
          <th width="10%">局号</th>
          <th width="20%">时间</th>
          {{
            Array.from({length:player_number}).map(function(_,i){
              return '<th width="'+(70/player_number)+'%"><img class="avabox" src="'+players[i].info.headimgurl+'"/>'+players[i].info.username+'</th>'
            }).join('')
          }}
        </tr>
      </thead>
      <tbody class="table-hover">
      {{
        flows.map(function(flow,i){
          return '\
          <tr>\
            <td>'+(i+1)+'</td>\
            <td>'+formatDate(flow.create_time)+'</td>\
            '+
            flow.rows.map(function(raw){
              return '<td>'+formatScore(raw.total)+'</td>'
            }).join('')
            +'\
          </tr>'
        }).join('')
      }}
      <tr>
        <td></td>
        <td>总计</td>
        {{
          players_total.map(function(player_total){
            return '<td>'+formatScore(player_total)+'</td>'
          }).join('')
        }}
      </tr>
      </tbody>
    </table>
  </xmp>
</body>
<script>
  var queryString = {
    parse(query_string = location.search) {
      if (query_string.indexOf("?") === 0) {
        query_string = query_string.substr(1);
      }
      var query = {};
      query_string.split("&").forEach(query_str => {
        var query_info = query_str.split("=");
        if (query_info[0]) {
          query[decodeURIComponent(query_info[0])] = decodeURIComponent(query_info[1]);
        }
      });
      return query;
    },
    stringify(query) {
      var res = [];
      for (let key in query) {
        var val = query[key];
        if (val) {
          res.push(encodeURIComponent(key) + "=" + encodeURIComponent(val));
        }
      }
      return res.join("&");
    }
  };
  function formatDate(date_value) {
    var date = new Date(date_value);
    var day = date.getDate();
    var monthIndex = date.getMonth();
    var year = date.getFullYear();
    var hours = date.getHours();
    var minutes = date.getMinutes();

    return [year,monthIndex+1,day].join("/")+" "+[hours,minutes].join(":");
  };
  function formatScore(score) {
    var color = '#333';
    if (score>0) {
      score = '+'+score
      color = '#009900';
    }else if(score<0){
      color = '#FF0000';
    }
    return '<div><FONT color="'+color+'">'+score+'</FONT><div>'
  }
</script>
<script>
  window.server_href = window.__server_href__ || `http://${location.hostname}:3000`;
  (function () {
    var query = queryString.parse();
    if (query.room_hash_id) {
      fetch(server_href + "/data/results/" + query.room_hash_id)
        .then(function (res) {
          return res.json();
        })
        .then(function (data) {
          if(data.status === "success"){
            var room_logs = data.data;
            var player_map = {};
            var players = room_logs.players = JSON.parse(room_logs.players_json);
            players.forEach(function(player){
              player_map[player.id] = player.info.username;
            });
            var flows = [];
            room_logs.players_total = players.map(function () {
              return 0;
            });
            for(var k in room_logs.flows){
              var flow = room_logs.flows[k];
              flow.data = JSON.parse(flow.data_json);

              flow.data.forEach(function (item) {
                item.username = player_map[item.player_id]||"<i>未知</i>";
              });

              flow.rows = players.map(function(player,i) {
                var total = 0;
                var player_results = flow.data.find(function(results) {
                  return results.player_id === player.id
                });
                if (player_results) {
                  total = player_results.total;
                  room_logs.players_total[i]+=total;
                }
                return {
                  username: player.info.username,
                  total: total
                }
              });
              flows.push(flow);
            }
            room_logs.flows = flows;
            // app.innerHTML += JSON.stringify(room_logs);
            var tpl = document.getElementById("room-log-tpl").innerHTML;
            var res = tpl.replace(/\{\{([\w\W]+?)\}\}/g,function (match,match_key) {
              with(room_logs){
                return eval(match_key)
              }
            });
            app.innerHTML = res;
          }else if(data.status === "error"){
            console.error(data.msg)
          }
        })
        .catch(function (err) {
          console.error(err)
        });
    } else {
    }
  })();

</script>

<style lang="">
  html,
  body,
  #app,
  table {
    width: 100%;
    height: 100%;
    margin:0;
    padding: 0;
  }
  *{
    box-sizing: border-box;
  }
  template,xmp{
    display: none;
  }
  div.table-title {
    display: block;
    margin: auto;
    max-width: 600px;
    padding:5px;
    width: 100%;
  }

  .table-title h3 {
    color: #fafafa;
    font-size: 30px;
    font-weight: 400;
    font-style:normal;
    font-family: "Roboto", helvetica, arial, sans-serif;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    text-transform:uppercase;
  }


  /*** Table Styles **/

  .table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    padding:5px;
    width: 100%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
  }
  
  th {
    color:#D5DDE5;;
    background:#1b1e24;
    border-bottom:4px solid #9ea7af;
    border-right: 1px solid #343a45;
    font-size:20px;
    font-weight: 100;
    padding:6px;
    text-align:left;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    vertical-align:middle;
  }

  th:first-child {
    border-top-left-radius:3px;
  }
  
  th:last-child {
    border-top-right-radius:3px;
    border-right:none;
  }
    
  tr {
    border-top: 1px solid #C1C3D1;
    border-bottom-: 1px solid #C1C3D1;
    color:#666B85;
    font-size:16px;
    font-weight:normal;
    text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
  }
  
  tr:hover td {
    background:#4E5066;
    color:#FFFFFF;
    border-top: 1px solid #22262e;
    border-bottom: 1px solid #22262e;
  }
  
  tr:first-child {
    border-top:none;
  }

  tr:last-child {
    border-bottom:none;
  }
  
  tr:nth-child(odd) td {
    background:#EBEBEB;
  }
  
  tr:nth-child(odd):hover td {
    background:#4E5066;
  }

  tr:last-child td:first-child {
    border-bottom-left-radius:3px;
  }
  
  tr:last-child td:last-child {
    border-bottom-right-radius:3px;
  }
  
  td {
    background:#FFFFFF;
    padding:5px;
    text-align:left;
    vertical-align:middle;
    font-weight:300;
    font-size:14px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    border-right: 1px solid #C1C3D1;
  }

  td:last-child {
    border-right: 0px;
  }

  th.text-left {
    text-align: left;
  }

  th.text-center {
    text-align: center;
  }

  th.text-right {
    text-align: right;
  }

  td.text-left {
    text-align: left;
  }

  th,td,td.text-center {
    text-align: center;
  }

  td.text-right {
    text-align: right;
  }
  .avabox{
    max-height: 1.5em;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.4em;
  }
</style>
</html>
